<template>
	<view class="page" v-if="checkPermission(['WORKFLOW:APPROVAL'])">
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button"
			active-color="#ffaaff" />
		<view class="list">
			<view v-for="one in list" :key="one.id">
				<view class="item" @longpress="deleteMaterialsById(one.id)">
					<view class="header">
						<view class="left">
							<text>{{one.name}}</text>
						</view>
						<view class="right" @tap="toInofPage(one.id,'edit')">
							<text>编辑</text>
						</view>
					</view>
					<view class="content">
						<view class="img">
							<image :src="one.photo"></image>
						</view>
						<view class="t">
							<view class="title">
								{{one.brand}}
							</view>
							<view class="rtitle">
								{{one.price}}元/{{one.unit}}
							</view>
						</view>
					
						<view class="attr">
							<view class="timer">
								<image src="https://www.retoc.xyz/icon/icon-14.png" mode="widthFix" class="icon"></image>
								<text class="tx">{{one.lastTime}}</text>
							</view>
							<view class="qty">
								{{one.qty}} {{one.unit}}
							</view>
						</view>
						<view class="desc">
							{{one.description}}
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view>
			<uni-fab @fabClick="fabClick" :pattern="pattern"></uni-fab>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<text class="text">查询类型</text>
					<view class="typea">
						<img class='img' src="https://www.retoc.xyz/icon/nav-5.png" alt="">
						<picker :range="typeArray" :range-key="'name'" :value="typeIndex" @change="typeChange">
							{{typeArray[typeIndex].name}}
						</picker>
					</view>

				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				current: 0,
				page: 1,
				length: 20,
				list: [],
				isLastPage: false,
				typeId: 1,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#ffaaff',
					iconColor: '#fff'
				},
			}
		},
		methods: {
			
			onClickItem(e) {
				let that = this
				that.list=[]
				that.current = e.currentIndex;
				console.log('current',that.current);
				that.typeId = that.current
				console.log('typeid',that.items[that.current].typeId);
				that.loadData(that)
			},
			fabClick() {
				let that=this
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
				that.toInofPage(null,"insert")
			},
			onReachBottom() {
				let that=this
				if(that.isLastPage){
					return
				}
				that.page=that.page+1
				that.loadData(that)
			},
			toInofPage(id,opt){
				// console.log('list.id:',id);
				uni.navigateTo({
					url:"../materials_info/materials_info?id="+id+"&opt="+opt
				})
			},
			loadData(ref){
				let data={
					typeId:ref.current+1,
					length:ref.length,
					page:ref.page<=0?1:ref.page
				}
				ref.ajax(ref.url.getMaterials,'GET',data,function(resp){
					
					let result=resp.data.result
					console.log(result);
					if(result==null||result.length==0){
						ref.isLastPage=true
						ref.page=ref.page-1
						uni.showToast({
							icon:'none',
							title:'没有下一页了'
						})
					}else{
						for(let material of result){
							material.lastTime=new Date(material.lastTime).format("yyyy年MM月dd日")
							ref.list.push(material)
						}
					}
				})
			}
		},
		onLoad() {
			let that = this;
			that.ajax(that.url.getType, 'GET', null, function(resp) {
				// console.log(resp);
				let result = resp.data.result
				for (let i in result) {
					
					that.items.push(result[i].typeDesc)
				}
				console.log(that.items);
			})
		},
		onShow() {
			this.page=1;
			this.isLastPage = false;
			this.list = []
			uni.pageScrollTo({
				scrollTop: '0'
			});
			this.loadData(this);
		}
	}
</script>

<style lang="less">
	@import url(materials.less);
</style>
